import React, { useState } from 'react'
import { Grid, List } from 'antd-mobile'

const tou = require('../assets/images/头像1.png')
let headerList = []
for (let i = 0; i < 20; i++) {
    headerList.push({
        text: '头像' + (i + 1),
        icon: require(`../assets/images/头像${i + 1}.png`) // 不能使用import
    })
}

function HeaderSelector(props) {

    const [selectIcon, setselectIcon] = useState(null)

    const listHead = selectIcon ? <div>
        已选择头像： <img src={require(`../assets/images/${selectIcon}.png`)} />
    </div> : "清选择头像"

    const handleClick = e => {
        const { text, icon } = e;
        console.log(text);
        setselectIcon(text)
        props.setheader(text)
    }

    return <div>
        <List renderHeader={() => listHead} >
            <Grid data={headerList} columnNum={5} onClick={handleClick}></Grid>
        </List>
    </div>
}

export default HeaderSelector